<template>
	<!-- app端不支持 -->
	<!-- 收入 -->
	<svg ref="mySvg" v-if="props.name=='income'" width="24" height="24" viewBox="0 0 48 48" fill="none"
		xmlns="http://www.w3.org/2000/svg">
		<path d="M35 38L30 33L34.9996 28" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
		<path d="M43 38L38 33L42.9996 28" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
		<path d="M43 22V9C43 7.89543 42.1046 7 41 7H7C5.89543 7 5 7.89543 5 9V39C5 40.1046 5.89543 41 7 41H28.4706"
			stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
		<path d="M13 15L18 21L23 15" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
		<path d="M12 27H24" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
		<path d="M12 21H24" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
		<path d="M18 21V33" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
	</svg>
	<!--  支出 -->
	<svg ref="mySvg" v-else-if="props.name=='expenses'" width="24" height="24" viewBox="0 0 48 48" fill="none"
		xmlns="http://www.w3.org/2000/svg">
		<path d="M30 36L35 31L30.0004 26" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
		<path d="M38 36L43 31L38.0004 26" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
		<path d="M43 22V9C43 7.89543 42.1046 7 41 7H7C5.89543 7 5 7.89543 5 9V39C5 40.1046 5.89543 41 7 41H28.4706"
			stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
		<path d="M13 15L18 21L23 15" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
		<path d="M12 27H24" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
		<path d="M12 21H24" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
		<path d="M18 21V33" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
	</svg>
	<!-- input 删除符号 -->
	<svg ref="mySvg" v-else-if="props.name=='delete'" width="24" height="24" viewBox="0 0 48 48" fill="none"
		xmlns="http://www.w3.org/2000/svg">
		<circle cx="24" cy="24" r="20" fill="none" stroke-width="4" />
		<path d="M17 31L31 17" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
		<path d="M19 19L17 17" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
		<path d="M31 31L29 29" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
	</svg>
</template>

<script setup>
	import {
		onMounted,
		ref,
		watch
	} from 'vue';
	const props = defineProps({
		name: String,
		show: {
			type: Boolean,
			default: true
		},
		stroke:{
			type:String,
			default:"#6666ff"
		}
	})
	const mySvg = ref(null)
	const long = ref(0)
	onMounted(() => {
		let child = [...mySvg.value.children]
		child.forEach((one) => {
			long.value += one.getTotalLength()
		})
		mySvg.value.style.stroke=props.stroke
		mySvg.value.style.strokeDasharray = long.value
		if (!props.show) {
			mySvg.value.style.strokeDashoffset = long.value
		}
		else mySvg.value.style.strokeDashoffset = 0
		// svg 偏移量
	})
	watch(() => props.show, (n) => {
		mySvg.value.style.emoveProperty('display')
		if (!n) mySvg.value.style.strokeDashoffset = long.value
		else mySvg.value.style.strokeDashoffset = 0
	})
</script>